/*@import "_animation.less";*/
@import "reset.css";
/*字体颜色*/
@ft-cr-h0 : #fff;
@ft-cr-h1 : #ff7938; //焦点
@ft-cr-h2 : #313333; //分类
@ft-cr-h3 : #323333; //列表标题
@ft-cr-h4 : #555555; //正文
@ft-cr-h5 : #989898; //小文字
@ft-cr-h6 : #dbc29a; //作者
/*背景颜色*/
@bg-cr-h0 : #fff;
@bg-cr-h1 : #f95555; //vip
@bg-cr-h2 : #eee; //总体
@bg-cr-h3 : #454545;//播放器
@bg-cr-h4 : #ffa;//状态
@bg-cr-h5 : #f9f9f9; //标题
@bg-cr-h6 : #4acc21; //按钮
/*边框颜色*/
@bd-cr-h0 : #fff;
@bd-cr-h1 : #cacaca; //正常
@bd-cr-h2 : #f95d5d; //分类
@bd-cr-h3 : #efefef; //淡边框
/*图标颜色*/
@ic-cr-h1 : #f46473; //喜欢
@ic-cr-h2 : #6cbae5; //评论
@ic-cr-h3 : #a3d830; //当前
@ic-cr-h4 : #ff7938; //级别


@-webkit-keyframes line-scale-pulse-out-rapid {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1); }

  80% {
    -webkit-transform: scaley(0.3);
    transform: scaley(0.3); }

  90% {
    -webkit-transform: scaley(1);
    transform: scaley(1); } }
@keyframes line-scale-pulse-out-rapid {
  0% {
    -webkit-transform: scaley(1);
    transform: scaley(1); }

  80% {
    -webkit-transform: scaley(0.3);
    transform: scaley(0.3); }

  90% {
    -webkit-transform: scaley(1);
    transform: scaley(1); } }

html,body{ background: @bg-cr-h2; font-size:13px;  }
/*ul{ overflow: hidden;}*/
#mn{ font-size: .8rem; overflow: hidden; overflow-y: auto;}
.loading{ width:100%; height:100%; text-align: center; margin-top:10rem;
  .loader{ display: inline-block;
    div{
      background: @ft-cr-h1;
      width: .4rem;
      height: 4rem;
      border-radius:.2rem;
      -webkit-border-radius: .2rem;
      margin:.5rem;
      animation-fill-mode:both;
      -webkit-animation-fill-mode:both;
      display:inline-block;
      animation:line-scale-pulse-out-rapid .9s 0s infinite cubic-bezier(.11,.49,.38,.78);
      -webkit-animation:line-scale-pulse-out-rapid .9s 0s infinite cubic-bezier(.11,.49,.38,.78);
      &:nth-child(1),
      &:nth-child(5){ animation-delay: .5s; -webkit-animation-delay: .5s;}
      &:nth-child(2),
      &:nth-child(4){ animation-delay: .25s; -webkit-animation-delay: .25s;}
    }

  }
  p{ padding:2rem; font-size:1.2rem; color: @ft-cr-h5;}
}

.read{ background: #fff; overflow: hidden;
  ul{
    li{ margin:1rem; border-bottom:1px solid #ccc;
      img{ float: left; width: 5rem; border-radius:.5rem;}
      h2{ line-height:2rem; font-weight:500; font-size:1.2rem; margin-left: 5rem; padding:0 .5rem;}
      p{ line-height:1.5rem; margin-left: 5rem; color: #999; padding:0 .5rem;}
      .icons{ margin-top: .5rem;}
    }
  }
}

.home{
  .banner{ background: #fff; word-break: keep-all; white-space: nowrap; position: relative;
    img{ width: 100%;}
    .dot{ position: absolute; bottom: 1rem; width:100%; padding: 0 1rem; text-align: right; z-index:99999; box-sizing: border-box;
      span{ display: inline-block; width: .5rem; height: .5rem; margin:0 .2rem; background: #fff; border-radius: 1rem; opacity: .5;
        &:nth-child(0){ right:3rem;}
        &:nth-child(1){ right:2rem;}
        &:nth-child(2){ right:1rem;}
        &:nth-child(3){ right:0rem;}
        &.cur{ opacity: 1;}
      }
    }
  }
  nav{ margin-top: 1rem; border-top:1px solid #e3e3e3; background: #fff; height:auto; overflow: hidden;
    &.col-2 a{ width: 50%;}
    &.col-3 a{ width: 33.3%;}
    &.col-4 a{ width: 25%;}
    a{ float: left; box-sizing: border-box; border-right:1px solid #e3e3e3; padding:2rem 0; text-align: center;
      &:last-child{ border:none;}
      img{ width: 50%;}
      h3{ padding-top:1rem; font-size:1.5rem; color: #999; font-weight:500;}
    }

  }
  .home-list{
    li{ margin-top:1rem; padding:1rem; background: #fff;
      >span{ display: block; line-height:2rem; font-size:.8rem; color: #999;}
      h2{ padding:.6rem 0; line-height:1.8rem; font-size:1.4rem; font-weight:500;}
      img{ width:100%;}
      header{ padding:1rem;
        span{ line-height:2rem; color: #999; font-size:1rem;}
      }
      .min-player{float:right; width:6rem; height:6rem; position: relative;
        .play{ position: absolute; top:1.3rem; left:1.3rem; border:.2rem solid #ccc; padding:.7rem .8rem; width:1.4rem; height:1.6rem; background: rgba(0, 0, 0, .5); border-radius:1.5rem;
          &:before{ display: block; content: ""; width: 0; height: 0; border-width:.8rem 0 .8rem 1.4rem; border-style: solid; border-color: transparent transparent transparent #fff;}
        }

      }
      p{ padding:1rem; color: #999; line-height: 2rem; font-size:1rem;}
    }
  }
}

.top .fm .player{ padding-top: 270px;
  .pic{ display: none;}

  .player-ctrl{position: fixed;  /*.fadeIn(0,-6rem); .animation(fadeIn .5s ease-in-out)*/
    .progress{ margin-top:1rem;}
  }
}
.example{
  h2{ font-weight: 500; line-height: 2rem; font-weight: 500; text-align: center;}
  ul{
    li{ background: @bg-cr-h0; margin-top: .5rem; padding: .5rem; line-height: 1.5rem;
      h2{ text-align: left; color: @ft-cr-h1;}
      h3{ font-weight: 500; font-size: 1.2rem;}
      h4{ font-weight: 500;}
      em{ color: @ic-cr-h2; padding-right: .5rem;}
    }
  }
}
.api{ font-size: 1rem; line-height: 1.5rem; padding: .5rem;
  h1{ font-weight: 500; line-height: 2rem; font-size: 1.2rem; text-align: center;}
  textarea{ width: 100%; height: 5rem; line-height: 1rem;}
  select{ font-size: 1rem;
    option{ font-size: .8rem;}
  }
  p{ min-height: 2rem; background: @bg-cr-h0;}
  .btn{ display: block; margin: 0 3rem; line-height: 1.5rem; font-size: 1rem; text-align: center; color: @ft-cr-h0; background: @ft-cr-h1;}
}

.bg-line(@color) {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(lighten(@color, 10%)), to(darken(@color, 10%)));
  background: -moz-linear-gradient(top, lighten(@color, 10%), darken(@color, 10%));
}
.fm{ min-width: 300px; min-height: 100%;
  h2{ font-weight: 500; padding-left: .5rem; font-size: 1.2rem;}
  .banner{ position: fixed;
    width:100%;
    top: 0; z-index: 9999;
    padding: .8rem 0 0;
    text-align:center;
    overflow: hidden;
    background: @bg-cr-h0;
    a{display: inline-block; width:20%;
      background: @bg-cr-h0;
      text-align: center;
      line-height: 1.5rem;
      span{ display: inline-block; width:3rem; height:3rem; color: #fff; border-radius: 1rem; font-size:2rem; line-height:3rem; text-align: center; background: #f00;
        .bg-line(#f66);

      }
      &:nth-child(1) span{.bg-line(#8ebae5);}
      &:nth-child(2) span{.bg-line(#e3cb7a);}
      &:nth-child(3) span{.bg-line(#39c1c0);}
      &:nth-child(4) span{.bg-line(#f96255);}
      &:nth-child(5) span{.bg-line(#b1ce59);}
      img{
        display: block;
        margin: 0 auto; clear: both; overflow: hidden;
        width: 4rem;}
    }
    h2{ text-align:left;
      line-height: 2rem; overflow: hidden; clear: both;
      background: @bg-cr-h2;}
  }
  .hot{
    padding-top: 8.4rem;}
  .player{ padding-top: 0;
    .pic{ height: 170px; background-repeat: no-repeat; background-position: center center; background-size: cover;}
    >img{ display: none; width: 100%;}
    .player-ctrl{ background: @bg-cr-h3;padding:.3rem 0 0; box-shadow: 0 3px 5px @ft-cr-h5;position: relative; width: 100%; top: 0;
      .progress{ background: @ft-cr-h2; height: .2rem; line-height: .2rem; margin-top:1rem; box-shadow: 1px 1px 1px @ft-cr-h4; position: relative;
        //margin: 0 0 1rem;
        -webkit-box-shadow: 1px 1px 1px @ft-cr-h4;
        .down{
          display: block;
          position: absolute;
          width: 0;
          height: .2rem;
          background: @ft-cr-h4;}
        .cur{ display: block;
          position: absolute; vertical-align: middle; height: .2rem; width: 0; background: @bg-cr-h2;
          &:after{display:block; float: right; content: ''; vertical-align: middle; height: .75rem; width: .75rem; margin: -.275rem 0; border-radius: 1rem; background: @bg-cr-h2;}
        }
      }
      .time{ padding: .5rem; font-size: .7rem; color: @ft-cr-h5;
        .count{ float: right;}
      }
      .pos{ margin-top: -3.5rem; height: 3.5rem;}
      .btns{ padding: .5rem 1.5rem .5rem; text-align: center; height:auto; overflow: hidden;
        a{ display: inline-block; width: 19.3%; height: 2.5rem;  overflow: visible; vertical-align: middle; font-size: .8rem; text-align: center;
          &.cur{}
          &.prev span{ text-indent: -.1rem;}
          &.next span{ text-indent: .05rem;}
        }
        span{ display: inline-block; width:.8rem; height:.8rem; overflow: hidden; padding: .5rem; font-size: .8rem; line-height: .8rem; border:1px solid @bd-cr-h0; border-radius: 10rem; color: @ft-cr-h0;
          &.cur{ vertical-align: middle; width:1.5rem; height:1.5rem; border: 1px solid @ic-cr-h3; color: @ic-cr-h3; font-size: 1.4rem; line-height: 1.2rem; margin-top: -.4rem }
          &.none{ /*border: none; font-size: 1.2rem;*/}
        }
        em{ display: inline-block; color: @ft-cr-h5; line-height: 1.2rem; font-size: .8rem;}
      }
      .status{ display: none; position: absolute; width: 100%; bottom: -1.2rem; line-height: 1.2rem; text-align: center; border: 1px solid @bd-cr-h1; box-sizing: border-box; color: @ft-cr-h1; background: @bg-cr-h4; font-size: .8rem;}
    }
    .share-ctrl{ height: 150px; padding-top: 30px; margin-top:-170px; text-align: center; opacity: .6;
      .iconfont{ display: inline-block; padding:1rem; color:#fff; font-size: 4rem; border:.5rem solid #fff;
        -webkit-border-radius: 4rem;
        -moz-border-radius: 4rem;
        border-radius: 4rem;
        box-shadow: 0 0 5px #333;
        text-shadow: 0 0 5px #333;
      }
    }
    .app-download{ position:fixed; bottom:-.1rem; width: 100%;
      img{ width:100%;}
    }
    /*&.top{ padding-top: 6.6rem;
      &.tips{ padding-top: 7.8rem;}
      >img{ display: none;}
      .player-ctrl{ position: fixed; top: 0; width: 100%;}

    }*/
    &.tips{
      .btns{ padding: .2rem 0 1.7rem;}
      .player-ctrl{
        .status{ display: block;}
      }
    }
  }
  .weixin{ position: fixed; z-index: 99999; width:100%; height:100%; opacity: .9; overflow: hidden; top:0; left:0; background: rgba(92, 92, 92, 1);
    img{ width:100%;}
  }
  .icons{ margin-top:0;}
  &.search{ padding-top:3.6rem;
    .bar{ padding: .8rem 0; background: #eee; position: fixed; top:0; left:0; width:100%; z-index: 9999;
      input{ display: block; background: #fff; width: 90%; margin:0 auto; padding:0 1rem; font-size:1.2rem; height: 2rem; line-height: 2rem; border:1px solid #ccc; border-radius:.8rem;}
    }
  }
}
.my{
  .active{ background: @bg-cr-h0; padding: 0 .5rem;
    li{ border-bottom: 1px solid @bd-cr-h3; padding: .5rem 0;
      &:last-child{ border: none;}
      .info{ line-height: 3rem;
        .avatar{ display: inline-block; width: 2rem; height: 2rem; border-radius: 2rem;
          background-position: center center;
          -webkit-background-size: cover;
          background-size: cover;}
        .author{ color: @ft-cr-h6;}
        .time,.status{ float: right; padding-left: 1rem; font-size: .8rem;}
        .time{ color: @ft-cr-h5;}
      }

      p{ padding-left: 2.5rem; text-indent: 1.6rem; font-size: .8rem; line-height: 1.2rem;}
    }
  }
  .group{ background: @bg-cr-h0;padding: 0 .5rem;
    li{ padding: .5rem 0 0;  border-bottom: 1px solid @bd-cr-h3; line-height: 1.5rem;
      &:last-child{ border: none;}
      h4{ font-weight: 500; text-align: left; font-size: .8rem; color: @ft-cr-h1;}
      h3{ font-weight: 500; text-align: left; font-size: 1rem; color: @ft-cr-h3; line-height: 2rem;}
      .cnt{ font-size: .8rem; color: @ft-cr-h5; text-align: left; text-indent: 1.6rem;}
      a.more{ margin:0 -.5rem;}
    }
  }
  .plan{ background: @bg-cr-h0; padding: .5rem .5rem 0; margin-bottom: .5rem;
    h3{ font-weight: 500; font-size: 1rem; color: @ft-cr-h3; line-height: 2rem;}
    .progress{ margin: 1rem .5rem; height: .3rem; background: @bg-cr-h2; border-radius: 1rem;
      .cur{ display: block; width: 2rem; height: .3rem; background: @ic-cr-h3; border-radius: 1rem;
        &:after{display: block;float:right; margin: -.275rem -.2rem 0; content: ''; width: .6rem; height: .6rem; border-radius: .5rem; background: @bg-cr-h0; border: .2rem solid @bg-cr-h2;}
      }
    }
    .info{ color: @ft-cr-h5; font-size: .8rem;
      .percent{float:right;}
    }
    .comment{
      li{ border-top: 1px solid @bd-cr-h3; margin: 0;}
    }
  }

  .music li{ position: relative;
    .operation{ -webkit-transition: right .5s ease; transition: right .5s ease; position: absolute; right: -10rem; top: 0; height: 100%; background: @bg-cr-h2; padding: 0 1rem;
      .btn{ display: block; line-height: 1.5rem; width: 6rem; color: @ft-cr-h0; text-align: center; margin: 1rem 0;
        &.play{ background: @bg-cr-h6;}
        &.del{ background: @bg-cr-h1;}
      }
    }
    &.cur .operation{ right: 0;}
  }
}
.tt{ padding:1rem; height:100%; box-sizing: border-box;
  .index{
    >img{ display: block; width: 100%;}
    .bar{ text-align: center; background: @bg-cr-h0; border-bottom: 1px solid @bd-cr-h3;
      a{ width: 5rem; display: inline-block; margin: 1rem; line-height: 1.5rem; text-align: center;
        img{ width: 70%;}
      }
    }
    .cnt{ margin-top: .5rem; /*border-top: 1px solid @bd-cr-h1;*/
      h2{ font-weight: 500; background: @bg-cr-h5; line-height: 2.5rem; font-size: 1.2rem; padding-left: 1rem;}
    }
  }
  .detail{ border-radius: 1rem; background: @bg-cr-h0; min-height:100%; position: relative;
    h2{ font-weight: 500; text-align: center; line-height: 4rem; color: @ft-cr-h4; font-size: 1.2rem; border-bottom: 1px solid #efefef;}
    p{ line-height: 1.5rem; font-size: 1rem; padding: 1rem; text-indent: 1.6rem; color: @ft-cr-h4;}

  }
  .ctrl{ position: absolute; width:100%; bottom: 0; padding: 1rem; text-align: center; border-top: 1px solid @bd-cr-h3;}
  .question{ border-radius: 1rem; background: @bg-cr-h0; min-height:100%; position: relative;
    h2{ font-weight: 500; text-align: center; line-height: 4rem; color: @ft-cr-h4; font-size: 1.2rem; border-bottom: 1px solid @bd-cr-h3;}
    p{font-weight: 500; line-height: 1.5rem; color: @ft-cr-h3; font-size: 1rem;  padding: 1rem;}
    .progress{ color: @ft-cr-h5; padding: 1rem; overflow: hidden;
      label{float:left;
        font-size: .8rem;}
      .bar{ margin: .3rem 0 .3rem 6rem; height: .3rem; background: @bg-cr-h2; border-radius: .3rem;
        .cur{float:left; height: .3rem; background: @bg-cr-h1; border-radius: .3rem;
          &:after{display: block; content: ''; float:right; background:@bg-cr-h0; width: .3rem; height: .3rem; border: .2rem solid #ccc; margin: -.2rem; border-radius: .3rem;}
        }
      }
    }
    ul{ padding-bottom: 2rem;
      li{
        line-height: 3rem; color: @ft-cr-h5; padding-left: 1.5rem;
        input[type="radio"]{
          border: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          appearance:none;
          outline: 0;
          font-family:"iconfont" !important;
          font-size:16px;
          font-style:normal;
          -webkit-font-smoothing: antialiased;
          -webkit-text-stroke-width: 0.2px;
          -moz-osx-font-smoothing: grayscale;
          background:none;
          &:after,checked:after{ display: block; content: '\e614'; width: 1rem; height: 1rem; background: none; }
          &:checked:after{ content:'\e602';
            color: @ic-cr-h1;}
        }
        label{ padding-left: .5rem; font-size: 1rem;}
      }
    }
  }
  .result{ margin: 1rem; border-radius: 1rem; background: @bg-cr-h0; min-height:90%;
    h2{ font-weight: 500; text-align: center; line-height: 4rem; color: @ft-cr-h4; font-size: 1rem; }
    h3{ font-weight: 500; padding: 0 .5rem; font-size: .8rem; color: @ft-cr-h1; line-height: 2rem; border-top: 1px solid @bd-cr-h3;}
    p{ font-size: 1rem; padding: 0 .5rem; line-height: 2rem; text-indent: 1.6rem;}
    .btn{ width: 6rem;}
    .ctrl{ position: inherit; line-height:3rem; margin-left:-1rem; padding:0;
      .gray{ display: block; width:100%; margin-left:-1rem; background: #efefef; color: @ft-cr-h5; -webkit-border-radius:0; -moz-border-radius:0; border-radius:0;}
    }
    .comment-box{position: fixed; bottom: 0; left: 0; width:100%;
      .comment-btn{ display: block; background: #fff; width:100%; border: 1px solid @bg-cr-h6; box-sizing: border-box; font-size: .8rem; margin-bottom:.5rem;
        .iconfont{ font-size: 1rem; padding-right: .5rem;}
      }
    }
    .comment{ background: #eee;
      li{ margin-bottom: 0; border-top: .5px solid #eee;
        .ctrl{padding:0; margin:0; border-top:none; line-height: 1.5rem;}
        p{ line-height:1.2rem; font-size:.8rem; text-indent: 0; padding:0; color: #555;}
        a.more{ background: none;}
      }
    } 
  }
}

.tabs{ line-height: 3rem;
  .ti{text-align: center; font-size: 1rem; overflow:hidden;
    span{ float: left; border-bottom: 2px solid @bd-cr-h1;height: 3rem; overflow: hidden;
      &.cur{ color: @ft-cr-h1; border-bottom: 2px solid @ft-cr-h1; }
    }
  }
  &.col-2 .ti span{ width: 50%;}
  &.col-3 .ti span{ width: 33.33%;}
  &.col-4 .ti span{ width: 25%;}
  &.col-5 .ti span{ width: 20%;}
}
.vip{ position: relative; overflow: hidden;
  &:before{display: block; content: 'VIP'; font-size: .7rem; line-height: 1.1rem; padding: 0 .1rem; position: absolute;left: 0; top: 0; z-index:999; color: #fff;}
  &:after{display: block; content: ''; position: absolute; top: -2.4rem; left: -1.1rem; z-index:998; width: 3rem; height: 4rem; background: @bg-cr-h1;
    transform: rotate(60deg);
    -webkit-transform: rotate(60deg); -moz-transform: rotate(60deg); -ms-transform: rotate(60deg); -o-transform: rotate(60deg); transform: rotate(60deg);}
}
.my-test{overflow:visible;
  li{ padding: 1rem 1rem .5rem; margin-bottom: .5rem; background: @bg-cr-h0;
    a{
      display: block; overflow: hidden;}
    .avatar{ float: left; width: 4rem; height: 4rem; border-radius: 5rem;
      background-position: center center;
      -webkit-background-size: cover;
      background-size: cover;
    }
    .li-cnt{ padding-left: 5rem; line-height: 2rem; margin: 0;
      h3{ font-weight: 500; color: @ft-cr-h4; font-size: 1.2rem; white-space:nowrap; overflow: hidden; text-overflow: ellipsis;
        margin-bottom: .5rem;}
      .icons{clear: none; margin: 0;}
      .category{ padding: .1rem .5rem; vertical-align: middle; /*margin: .1rem;*/ color: @ft-cr-h5; font-size: .6rem; line-height: .8rem; border: .5px solid @ic-cr-h2; border-radius: 2rem;}
    }
  }
}
.list{ overflow: visible;
  li{margin-top: .5rem; background: #ffffff; padding: 1rem 1rem .5rem; overflow: hidden; clear: both;
    .avatar{float: left; width: 4rem; height: 4rem; border-radius: 2.5rem;
      background-position: center center;
      -webkit-background-size: cover;
      background-size: cover;
    }
    .cnt{ margin-left: 4.5rem; overflow: hidden;
      h3{ font-weight: 500; line-height: 2rem; height: 2rem; font-size: 1.2rem; color: @ft-cr-h4; clear: both; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
      .professor{float:right;font-size: 1rem; line-height: 1.2rem; padding: 0 .5rem; color: @ft-cr-h5; font-size: .8rem;}
    }
    .category{ border: .5px solid @ic-cr-h2; border-radius: 1rem; padding: .1rem .5rem; line-height: .8rem; color: @ft-cr-h5; font-size: .6rem;}
  }
}
.article{ padding-top: .5rem; background: @bg-cr-h0;
  .icons{ margin-top: 0;}
  article{
    h1{ font-weight: 500; font-size: 1.1rem; line-height: 1.2rem; text-align: center; padding-top: 1rem;}
    h2{ font-weight: 500; font-size: .8rem; line-height: 1.5rem; color: @ft-cr-h1; text-align: center;}
    .cnt{ padding: 0 .5rem .5rem; text-indent: 1.6rem; line-height: 1.3rem; font-size: .8rem;}
  }
  .ctrl{ padding: .5rem; text-align: right; background: @bg-cr-h5;
    a{ display: inline-block; text-align: center;}
    em{ font-size: .5rem;}
  }
}
#mn>.comment{position: relative;}
.comment{ height:100%;
  li{ line-height: 1.5rem; margin-bottom: .5rem; padding: .5rem; background:@bg-cr-h0;
    .avatar{float:left; width:2rem; height: 2rem; border-radius: 2rem;
      background-position: center center;
      -webkit-background-size: cover;
      background-size: cover;
    }
    .info{ margin-left: 2.5rem;
      .author{ color: @ft-cr-h1; font-size: .9rem;}

    }
    p{ margin-left:2.5rem; line-height: 1.2rem; font-size: .8rem; color: @ft-cr-h4;}
    .ctrl{ overflow: hidden; padding:0; margin-bottom: -.5rem;
      .time{ float: right; font-size: .8rem; color: @ft-cr-h5;}
    }
  }
  .level-ctrl{ font-size: 1.5rem; line-height: 4rem; text-align: center; color: @ft-cr-h1; position: absolute; width: 100%; z-index: 999;
    .iconfont{ font-size: 1.5rem;}
    .icon-xingji{ font-weight: 700;}
    .icon-xingji,.icon-xingjiban{ color: @ft-cr-h1;}
    .icon-xingjiline{ color: @ft-cr-h5;}
  }
  form{ position: absolute; top:0; left:0; width: 100%; height:100%; padding:4rem 0 3rem; box-sizing: border-box;}
  textarea{display: block; border: none; width: 100%; height: 100%; box-sizing: border-box; padding: .5rem; font-size:1.2rem; line-height:1.5rem;}
  .ctrl{padding: .5rem 0; text-align: center;}
}
.icons{ margin-top: 1rem; line-height: 2rem; color: @ft-cr-h5; overflow: hidden; clear: both; font-size: .8rem;
  span{ display: inline-block; padding: 0 .5rem; color: @ft-cr-h5;/* font-family: "宋体";*/ font-size:.7rem;
    /*&.iconfont{ font-size: 1rem;}*/
    &.like .iconfont,&.comment .iconfont{ font-size:.8rem;}
    &.space{float:right;}
    &.category{ padding: .1rem .5rem; vertical-align: middle; /*margin: .1rem;*/ color: @ft-cr-h5; font-size: .6rem; line-height: .8rem; border: .5px solid @ic-cr-h2; border-radius: 2rem;}
  }
  .like,.comment,.time{ float: right; padding:0 .3rem;}
  .icon-xin{color: @ic-cr-h1;}
  .icon-pinglun{ color: @ic-cr-h2;}
}
.level{ float: left; font-size: .8rem; line-height: 1.1rem; vertical-align: middle; color: @ft-cr-h5;
  .iconfont{ font-size: .8rem; vertical-align: middle;}
  em{vertical-align: middle;}
  .icon-xingji{ font-weight: 700;}
  .icon-xingji,.icon-xingjiban{ padding: 0; color: @ic-cr-h4;}
  .icon-xingjiline{ padding: 0; color: @ft-cr-h5;}
}
a.more{ display: block; font-size: 1rem; text-align: center; background: @bg-cr-h2; color: @ft-cr-h4; line-height: 2rem; margin: -1rem; padding: .5rem 0 1.5rem;}

.btn{ display: inline-block; padding: .3rem 1rem; line-height: 1.5rem; border-radius: .4rem;
  &.red{ background: @bg-cr-h1; color: #fff;}
  &.red-e{
    background: @bd-cr-h0;
    border: 1px solid @bd-cr-h2;
    color: @bd-cr-h2;}
  &.dis{
    background: @bg-cr-h2;
    color: @ft-cr-h5;
  }
  &.green{
   background: @bg-cr-h6; color: @ft-cr-h0;
  }
  &.orange{
    background: @ft-cr-h1; color: @ft-cr-h0;
  }
  &.gray{
    background: @bg-cr-h2; color: @ft-cr-h1;
  }
}

.alert-box{ position: fixed; width:100%; height:100%; top:0; left:0;
  background: rgba(0, 0, 0, .3);
  .box{ background: #fff; line-height:2rem;   padding: 1rem; margin:10rem 2rem 0;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    border-radius: .5rem;
    p{ text-align: center;}
    .close{ text-align: right;
      .iconfont{ display: inline-block; width:1.5rem; height:1.5rem; color: @ft-cr-h1;}
    }

    .btn{ display: block; text-align: center; margin: 1rem 0;
      -webkit-border-radius: 1rem;
      -moz-border-radius: 1rem;
      border-radius: 1rem;}
  }
}

.confirm-box{ position:fixed; width:100%; height:100%; top:0; left:0; background: rgba(0,0,0,.3);
  .box{ position: absolute; bottom:-10rem; width:100%; background: #fff; line-height:2rem; text-align: center;
    -webkit-transition: bottom .5s; -moz-transition: bottom .5s; -ms-transition: bottom .5s; -o-transition: bottom .5s; transition: bottom .5s;
    h2{ font-weight:500; padding: .5rem 1rem 0; font-size:1rem; line-height:2rem; text-align: left; color: @ft-cr-h1; border-bottom: .1rem solid @ft-cr-h1;}
    p{ text-align: center; line-height:1.5rem; padding:.5rem;}
    .btn{ display: inline-block; width:45%; text-align: center; margin:1rem 0; border-radius: 1rem; box-sizing: border-box;
      &.ok{ background: @ft-cr-h1; color: #fff;}
      &.cancel{ background: @bg-cr-h2; color: @ft-cr-h1;}
    }
  }
}
